<template>
  <div class="cms-site">
    <!--<el-tree class="tree" :data="data" accordion @node-click="handleNodeClick">
        </el-tree>-->
    <el-form :inline="true" :model="dataForm">
      <!--<el-form-item>
        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
      </el-form-item>-->
      <el-form-item>
        <!--<el-button @click="getDataList()">查询</el-button>-->
        <el-button class="navbutton" type="primary">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :row-class-name="tableRowClassName" :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
      </el-table-column>
      <el-table-column prop="sitename" header-align="center" align="center" label="站点名">
      </el-table-column>
      <el-table-column prop="sitecontent" header-align="center" align="center" label="站点描述">
      </el-table-column>
      <el-table-column prop="address" header-align="center" align="center" label="访问地址">
      </el-table-column>
      <el-table-column prop="state" header-align="center" align="center" label="状态">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="360" label="操作">
        <template slot-scope="scope">
          <el-button size="small">修改</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<style lang="scss">
  .cms-site {
    .el-table .odd-row td {
      background-color: #FBFBFB;
    }
    .el-table .even-row td {
      background-color: white;
    }
    .navbutton {
      margin-top: 12px;
    }
    .rightcontent {
      padding-left: 15px;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        dataForm: {
          paramKey: ''
        },
        dataList: [{
          id: 1,
          sitename: "测试",
          sitecontent: "测试内容",
          address: "www.baidu.com",
          state: "正常"
        }, {
          id: 2,
          sitename: "测试",
          sitecontent: "测试内容",
          address: "www.baidu.com",
          state: "正常"
        }],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {},
    activated() {
      //  this.getDataList()
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if(rowIndex % 2 != 0) {
          return 'odd-row';
        } else if(rowIndex % 2 == 0) {
          return 'even-row';
        }
        return '';
      }
    }
  }
</script>
